<template>
  <div>
    <el-table :data="students" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="#ID"></el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <el-avatar shape="square" size="medium" :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phoneNum" label="手机"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="'查看详情'" placement="top">
            <el-button type="primary" icon="el-icon-info"
                       size="small" @click="showInfo(scope.row)" circle></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" :content="'删除'" placement="top">
            <el-button type="danger" icon="el-icon-delete" size="small"
                       @click="deleteStu(scope.row.id)" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    students: {
      type: Array,
      require: true
    }
  },
  methods: {
    showInfo(stu) {
      this.$emit('show', stu)
    },
    deleteStu(id) {
      this.$emit('deleteStu', id)
    }
  }
}
</script>

<style scoped>

</style>
